﻿<!DOCTYPE html>
<html>
<head>
    <title>minimal config</title>
    <link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <link href="mingrid.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.6.2.js"></script>
    <script src="jquery-ui-1.8.16.custom.js"></script>
    <script src="mingrid.js"></script>
    <script src="benchmarks.js"></script>
</head>
<body>
    <div>
        <style>
            body
            {
                font-size: 0.6em;
                font-family: Verdana;
            }
            .demo #grid
            {
                font-size: 0.90em;
            }
            button.action
            {
                width: 80px;
            }
        </style>
        <script type="text/javascript">


            var grid_width = 540;
            $(function () {
                $("#text-N-button").button().bind("click", function () {
                    var n = parseInt($("#text-N").val());
                    var data = generateData(n);
                    $("div.demo").empty();
                    var t = timeRun(function () {
                        render(data);
                    });
                    $("#output").html("<span>" + n + " rows : " + t + " ms</span>");
                });
                $("#clear-button").button().bind("click", function () {
                    $("div.demo").empty();
                    $("#text-N").text("");
                });
                //BENCHMARKS.timeprofile(renderAuto);            

            });



            function render(data) {
                var columns = {};
                columns = jQuery.ui.mingrid.autoGenerateColumnDefinitions(data[0], 60);
                $("div.demo").append("<div id='grid'></div>");
                $("#grid").mingrid({
                    source: data,
                    width: grid_width,
                    height: 300,
                    columns: columns,
                    autoLayout: false,
                    isDraggable: false,
                    load: function (event, ui) {

                    }
                });
            };

            var generateData = (function () {
                var Item = function () { };
                var COLUMN_COUNT = 6;
                return function (n) {
                    var items = [];
                    for (var i = 0; i < n; i++) {
                        var item = new Item();
                        for (var j = 0; j < COLUMN_COUNT; j++) {
                            item["field" + j] = Math.floor(Math.random() * 10000000) / 100;
                        }
                        items.push(item);
                    }
                    return items;
                };
            } ());

            var timeRun = function (fn) {
                var t0 = new Date().getTime();
                fn();
                var time = (new Date().getTime() - t0);
                return time;
            };


        </script>
        <div>
            <p>
                This is a demo of the grid with minimal configuration. 
                Get the source at <br />
            <a href="http://mingrid.codeplex.com">http://mingrid.codeplex.com</a>
            </p>
            
            <label>
                code:</label>
            <p>
                <pre class='brush:js'>
        $("#grid").mingrid({
                source: data,
                width: grid_width,
                height: 300,
                columns: columns,
                autoLayout: false,
                isDraggable: false,
                load: function (event, ui) {
                    //called when the grid has finished rendering.
                }
            });
    </pre>
            </p>
        </div>
        <div>
            <label>
                number rows:</label>
            <input class='ui-widget-content ui-widget' id='text-N' type='text' value='100' />
            <button id='text-N-button' class='action'>
                render</button>
            <button id='clear-button' class='action'>
                clear</button>
            <p id='output'>
            </p>
        </div>
        <div class='demo'>
        </div>
    </div>
</body>
</html>
